<template>
	<view class="container">
		<navSearchBar title="我的标注" ></navSearchBar>
		<view class="tab flex-col-between">
			<text v-for="(item,index) in tab" :style="{color:current== index?'#3B54DA':'#5B5D65'}"
				@click="tabChage(index)">{{item.name}}</text>
		</view>
		<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
			<view class="list">
				<uni-swipe-action>
				<view  v-for="item in list" :key="item.id" @click="toDetail(item)">
						<uni-swipe-action-item :autoClose="true">
							<view class="list-item">
								<view class="item-header flex-row-center">
									<image :src="item.relevance.picture" mode=""></image>
									<text>{{item.relevance.title}}</text>
								</view>
								<view class="item-content">
									<view class="content-label">标注内容: </view>
									<view class="content-text">{{item.content}}</view>
								</view>
							</view>
							<template v-slot:right>
								<view class="action-btn" @click.stop="handleDel(item.id)">删除</view>
							</template>
						</uni-swipe-action-item>
					</view>
				</uni-swipe-action>
			<!-- 	<view class="list-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
					
					<view class="item-header flex-row-center">
						<image :src="item.relevance.picture" mode=""></image>
						<text>{{item.relevance.title}}</text>
					</view>
					<view class="item-content">
						<view class="content-label">标注内容: </view>
						<view class="content-text">{{item.content}}</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:[
					{name:"产品",fun:"productLabel",url:"productDetail",delFun:'productDelLabel'},
					{name:"案例",fun:"caseLabel",url:"sampleDetail",delFun:'exampleDelLabel'},
					{name:"基地",fun:"baseLabel",url:"baseResourceDetail",delFun:'placeDelLabel'},
					{name:"讲师",fun:"lecturerLabel",url:"teacherResourceDetail",delFun:'teacherDelLabel'},
					{name:"供应商",fun:"supplierLabel",url:"supplierResourceDeatil",delFun:'supplierDelLabel'},
				],
				current:0,
				list:[],
				page:1,
				pageSize:10
			};
		},
		onLoad() {
			this.getLabel()
		},
		methods:{
			async getLabel() {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.$api[this.tab[this.current].fun]({limit:this.page * this.pageSize})
				if(res.data.status) {
					uni.hideLoading();
					this.list = res.data.data.data
				}
				console.log(this.tab[this.current].fun,res.data.data.data)
			},
			loadMore() {
				if(this.list.length <= this.page * this.pageSize) return
				this.page++
				this.getLabel()
			},
			tabChage(num) {
				this.current = num
				this.page = 1;
				this.list = [];
				this.getLabel()
			},
			toDetail(info) {
				this.$Router.push({name:this.tab[this.current].url,query:{id:info.relevance.id}})
			},
			async handleDel(id) {
				uni.showLoading()
				let res = await this.$api[this.tab[this.current].delFun]({id})
				uni.hideLoading();
				if (res.data.status == 200) {
					this.$tip.success("删除成功");
					this.page = 1;
					this.getLabel();
				} else {
					this.$tip.error("删除失败")
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.tab {
		height: 98rpx;
		padding: 40rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #EFEFEF;
	
		text {
			font-size: 28rpx;
			font-weight: Regular;
		}
	}
	.scroll {
		flex: 1;
		height: 100%;
	}
	.list {
		padding: 10rpx 30rpx;
		padding-bottom: 160rpx;
		.list-item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
			box-sizing: border-box;
		}

		.item-header {
			margin-bottom: 32rpx;

			image {
				width: 140rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			text {
				font-size: 32rpx;
				font-weight: Semibold;
				color: #525252;
			}
		}
		.item-content {
			display: flex;
			align-items: flex-start;
			line-height: 48rpx;
			font-size: $text-size;
			color: #6F6F6F;
			.content-label {
				width: 120rpx;
				margin-right: 10rpx;
			}
			.content-text {
				width: 560rpx;
				word-break: break-word;
			}
		}
		.action-btn {
			width: 240rpx;
			height: 276rpx;
			line-height: 276rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			background: #FF3D3D;
		}
	}
</style>